<template>
	<view class="shopCart" >
		<template v-if="cartList.length>0">
			<!-- 自定义导航栏 -->
				<uniNavBar
					height="30"
					title="购物车"
					:rightText="isEdit?'完成':'编辑'"
					fixed="true"
					@clickRight="edit()"
				></uniNavBar>
			<!-- 商品内容 -->
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in cartList" :key='item.id'>
					<label class="radio" @click='selectCheck(index)'>
						<radio value="" color="#007AFF" :checked="item.checked"/><text></text>
					</label>
					<image class="shop-img" :src="item.imgUrl" mode=""></image>
					<view class="shop-text">
						<template v-if="isEdit">
							<view class="shop-color f-color" style="font-size: 36rpx; padding-bottom: 20rpx;">颜色:</view>
							<view class="shop-price">
								<view>￥{{item.pprice}}</view>
								<uniNumberBox 
								:min="1"
								:value="item.num"
								@change="changeNumber($event,index,item)"
								></uniNumberBox>
							</view>
						</template>
						
						<template v-else>
							<view class="shop-name">{{item.name}}</view>
							<view class="shop-color f-color">颜色:</view>
							<view class="shop-price">
								<view>￥{{item.pprice}}</view>
								<view>*{{item.num}}</view>
							</view>
						</template>

					</view>
				</view>
			</view>
			<!-- 底部固定内容 -->
			<view class="shop-footer">
				<label class="footer-radio" @click="checkedAllFn">
					<radio value="" :checked="checkedAll" /><text>全选</text>
				</label>
				<view class="footer-right">
					<template v-if="isEdit">
						<view class="moveBtn">移入收藏夹</view>
						<view class="deleteBtn" @click="deleteGoodsFn()">删除</view>
					</template>
					<template v-else>
						<view class="footer-text">
							<view class="sum">
								合计:
								<view class="sum-price">
									￥{{totalCount.pprice}}
								</view>
							</view>
							<view style="font-size:20rpx;text-align: right;">不含运费</view>
						</view>
						<view @click="goConfirmOrder" class="footer-button">
							结算({{totalCount.num}})
						</view>
					</template>

				</view>
			</view>
		</template>
		<template v-else>
				<!-- 自定义导航栏 -->
				<uniNavBar
					title="购物车"
					rightText="消息"
					fixed="true"
					statusBar="true"
				></uniNavBar>
				<view class="clear-text">
					囧~购物车还是空的~
				</view>
		</template>
		<Tabbar currentPage='shopcart'></Tabbar>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Tabbar from '../../components/common/Tabbar.vue'
	import uniNumberBox from '../../components/uniapp/uni-number-box/components/uni-number-box/uni-number-box.vue'
	import uniNavBar from '@/components/uniapp/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				// 是否编辑模式
				isEdit:false,
			}
		},
		components:{
			uniNumberBox,
			uniNavBar,
			Tabbar
		},
		computed:{
			...mapState({
				cartList:state=>state.cart.cartList,
				selectedList:state=>state.cart.selectedList
			}),
			...mapGetters(['checkedAll','totalCount'])
		},
		onShow(){
			this.getData(),
			this.unCheckAll()
		},
		methods: {
			...mapActions(['checkedAllFn','deleteGoodsFn']),
			...mapMutations(['selectCheck','initGetData','unCheckAll','initOrder']),
			// 初始化数据
			getData(){
				$http.request({
					url: '/selectCart',
					method:"POST",
					header:{
						token:true,
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						userName:this.userName,
						userPwd:this.userPwd
					}
				}).then((res) =>{
					this.initGetData(res)
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			edit(){
				this.isEdit=!this.isEdit
			},
			// 修改数量的方法
			changeNumber(value,index,item){
				
				$http.request({
					url: '/updateNumCart',
					method:"POST",
					header:{
						token:true,
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						goodsId:item.goodsId,
						num:value,
					}
				}).then((res) =>{
					this.cartList[index].num=value
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
				

			},
			// 进入确认订单
			goConfirmOrder(){
				console.log('e',JSON.stringify(this.selectedList))
				if(this.selectedList.length===0){
					return uni.showToast({
						title:'请选择商品结算',
						icon:'none'
					})
				}
				// 创建新数组通过循环购物车数组判断是否选中，如果选中存入新数组
				let newList=[];
				this.cartList.forEach(item=>{
					// console.log(item)
					this.selectedList.filter(m=>{
						if(item.id==m){
							newList.push(item)
						}
					})
				})
				// 发送请求
				$http.request({
					url: '/addOrder',
					method:"POST",
					header:{
						token:true,
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						arr:JSON.stringify(newList)
					}
				}).then((res) =>{
					// 存储订单号
					this.initOrder(res.data[0].order_id)
					// 跳转页面
					if(res.success){
						uni.navigateTo({
							url:`../comfirm-order/comfirm-order?detail=${JSON.stringify(this.selectedList)}`
						})
					}
				}).catch(()=>{
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
				
				
				
			}
		}
	}
</script>

<style scoped>
.clear-text{
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	background-color: #a1a1a1;
	justify-content: center;
}
.shop-list{
	padding-bottom: 260rpx;
}
.shop-item{
	display: flex;
	padding: 20rpx;
	align-items: center;
	background-color: #f7f7f7;
	margin-bottom: 10rpx;
}
.shop-name{
	height: 45rpx;
	width: 400rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	padding-bottom: 20rpx;
}
.shop-img{
	width: 200rpx;
	height: 200rpx;
}
.shop-text{
	flex:1;
	padding-left: 20rpx;
}
.shop-color{
	font-size: 24rpx
}

.shop-price{
	display: flex;
	justify-content: space-between;
}
.shop-footer{
	background-color: #FFFFFF;
	position: fixed;
	left: 0;
	bottom: 160rpx;
	display: flex;
	padding: 0 20rpx;
	justify-content: space-between;
	height: 100rpx;
	width: 100%;
	border-top: 2px solid #F7F7F7;
	border-bottom: 2px solid #F7F7F7;
}
.footer-radio{
	line-height: 100rpx;
}
.footer-right{
	display: flex;
	
}
.footer-button{
	width: 220rpx;
	height: 100rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 100rpx;
	background-color: #007AFF;
}
.sum{
	display: flex;

}
.sum-price{
	color: #007AFF;
	font-weight: bold;
}
.footer-text{
	padding:10rpx 20rpx;
}
.moveBtn{
	width: 200rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color:#ffffff;
	background-color: #333333;
}
.deleteBtn{
	width: 180rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	color:#ffffff;
	background-color: #007AFF;
}
</style>
